import React, { useCallback } from "react";
import { Ionicons, MaterialIcons } from "@expo/vector-icons";
import { Link } from "expo-router";
import { Drawer } from "expo-router/drawer";
import { useThemeColor } from "heroui-native";
import { Pressable, Text } from "react-native";
import { ThemeToggle } from "@/components/theme-toggle";

function DrawerLayout() {
  const themeColorForeground = useThemeColor("foreground");
  const themeColorBackground = useThemeColor("background");

  const renderThemeToggle = useCallback(() => <ThemeToggle />, []);

  return (
    <Drawer
      screenOptions=\{{
        headerTintColor: themeColorForeground,
        headerStyle: { backgroundColor: themeColorBackground },
        headerTitleStyle: {
          fontWeight: "600",
          color: themeColorForeground,
        },
        headerRight: renderThemeToggle,
        drawerStyle: { backgroundColor: themeColorBackground },
      }}
    >
      <Drawer.Screen
        name="index"
        options=\{{
          headerTitle: "Home",
          drawerLabel: ({ color, focused }) => (
            <Text style=\{{ color: focused ? color : themeColorForeground }}>Home</Text>
          ),
          drawerIcon: ({ size, color, focused }) => (
            <Ionicons name="home-outline" size={size} color={focused ? color : themeColorForeground} />
          ),
        }}
      />
      <Drawer.Screen
        name="(tabs)"
        options=\{{
          headerTitle: "Tabs",
          drawerLabel: ({ color, focused }) => (
            <Text style=\{{ color: focused ? color : themeColorForeground }}>Tabs</Text>
          ),
          drawerIcon: ({ size, color, focused }) => (
            <MaterialIcons name="border-bottom" size={size} color={focused ? color : themeColorForeground} />
          ),
          headerRight: () => (
            <Link href="/modal" asChild>
              <Pressable className="mr-4">
                <Ionicons name="add-outline" size={24} color={themeColorForeground} />
              </Pressable>
            </Link>
          ),
        }}
      />
      {{#if (includes examples "todo")}}
      <Drawer.Screen
        name="todos"
        options=\{{
          headerTitle: "Todos",
          drawerLabel: ({ color, focused }) => (
            <Text style=\{{ color: focused ? color : themeColorForeground }}>Todos</Text>
          ),
          drawerIcon: ({ size, color, focused }) => (
            <Ionicons name="checkbox-outline" size={size} color={focused ? color : themeColorForeground} />
          ),
        }}
      />
      {{/if}}
      {{#if (includes examples "ai")}}
      <Drawer.Screen
        name="ai"
        options=\{{
          headerTitle: "AI",
          drawerLabel: ({ color, focused }) => (
            <Text style=\{{ color: focused ? color : themeColorForeground }}>AI</Text>
          ),
          drawerIcon: ({ size, color, focused }) => (
            <Ionicons name="chatbubble-ellipses-outline" size={size} color={focused ? color : themeColorForeground} />
          ),
        }}
      />
      {{/if}}
    </Drawer>
  );
}

export default DrawerLayout;